<template>
    <div class="cinemaInfo" ref="cinemaInfo">
      <div class="content">
        <div class="banner-wrapper" ref="banner" >
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item,index) in cinemaPicUrl" :key="index">
              <div class="img-wrapper">
                <img :src="item" alt="" style="width: 100%;height: 100%">
              </div>
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="address-wrapper">
          <h1 class="name">{{name}}</h1>
          <div class="address" @click="$router.push({path:'/location',query:{latitude:lat,longitude:lon,cinemaName:name}})">
            <div class="left"></div>
            <div class="right">{{address}}</div>
          </div>
          <div class="tel">
            <div class="left"></div>
            <div class="right"><a :href="'tel:'+tel" style="color: #acb1bb">{{tel}}</a></div>
          </div>

        </div>
        <div class="activity-wrapper">
          <h1 class="name">优惠活动</h1>
          <div class="activity-items-wrapper" :class="{loadMore:isLoadMore}" ref="activity-items-wrapper">
            <div v-for="item in actLabelList" class="activity-item">
              <div class="left">
                <div class="tag">{{item.actLabel}}</div>
              </div>
              <div class="right">{{item.actName}}</div>
            </div>
          </div>
          <div class="load-more" @click="isLoadMore=!isLoadMore" >
            {{isLoadMore?'点击收起':'加载更多'}}
            <span class="arrow" :class="{loadMore: isLoadMore}"></span>
          </div>
        </div>
        <div class="special-service-wrapper">
          <h1 class="name">特色服务</h1>
          <div class="tag-items-wrapper">
            <div v-for="item in featureLabelList" class="tag-item">
              <div class="left">
                <div class="tag">{{item.text}}</div>
              </div>
              <div class="right">
                {{item.desc}}
              </div>
            </div>
          </div>
        </div>
        <div class="info-wrapper">
          <h1 class="name">影院详情</h1>
          <div class="content">
            {{cinemaDesrc}}
          </div>
        </div>
      </div>
      <div class="refresh-wrapper" v-show="isRefresh">
        <refresh></refresh>
      </div>
      <loading v-show="isLoading"></loading>
      <div class="back-wrapper">
        <back></back>
      </div>
    </div>
</template>

<script>
  import { Swipe, SwipeItem } from 'mint-ui';
  import refresh from '../../../components/refresh/refresh'
  import BScroll from 'better-scroll'
  import back from '../../../components/back/back'
  import "mint-ui/lib/style.css"
  import {setStorage} from "../../../common/js/localStorage";
  import loading from '../../../components/loading/loading'
  import global from '../../../common/js/global'

  export default {
        name: "cinemaInfo",
        data(){
          return{
            isLoadMore:false,
            name:'',
            address:'',
            tel:'',
            cinemaPicUrl:[],
            featureLabelList:[],
            cinemaDesrc:'',
            actLabelList:[],
            lon:'',
            lat:'',
            isRefresh:false,
            isLoading:true
          }
        },
        methods:{
          _getCinemaInfo(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                },
                url:global.$host+'/cinemaDetail',
                data:{
                  cinemaId:this.$route.query.id
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  this.isLoading = false
                  let data = res.data.data
                  this.name = data.name
                  this.address = data.address
                  this.actLabelList = data.actLabelList
                  this.featureLabelList = data.featureLabelList
                  this.tel = data.tel
                  this.cinemaPicUrl = data.cinemaPicUrl
                  this.cinemaDesrc = data.cinemaDesrc
                  this.lon = data.longitude
                  this.lat = data.latitude
                }else {
                }
              }else {
              }

            })
          },
          _refresh(){
            this.$nextTick(()=>{
              if(!this.scroll){
                let scroll = new BScroll(this.$refs['cinemaInfo'],{
                  click:true,
                  pullUpLoad:{
                    threshold:-10
                  },
                  pullDownRefresh: {
                    threshold: 40,
                    stop: 30
                  }
                })
                scroll.on('pullingDown', () => {
                  this.isRefresh = true
                  setTimeout(()=>{
                    window.history.go(0)
                    scroll.finishPullDown();
                  },600)
                });
                scroll.on('pullingUp',()=>{
                  scroll.refresh()
                  scroll.finishPullUp()

                })
              }else {
                this.scroll.refresh();
              }
            })
          }
        },
        components:{
          'back':back,
          'refresh':refresh,
          'loading':loading
        },
        mounted() {
          setStorage('isRefresh',true)
          this._getCinemaInfo()
          let clientWidth = document.body.clientWidth
          this.$refs['banner'].style.height = (clientWidth/75*32)+'px'
          this._refresh()
        },
        watch:{
          'actLabelList'(){
            if(this.actLabelList>=2){
              this.$refs['activity-items-wrapper'].style.height = '88px'
            }
          },
          'isLoadMore'(){
            if(this.isLoadMore){
              this.$refs['activity-items-wrapper'].style.height =this.actLabelList.length*44+ 'px'
            }else {
              this.$refs['activity-items-wrapper'].style.height = '88px'
            }
            this._refresh()
          }
        }
    }
</script>

<style scoped lang="stylus">
  .banner-wrapper
    background url("bg_cinema.png")no-repeat center center/100% 100%
  .cinemaInfo
    height 100%
    overflow hidden
    transform: translateZ(0)
    .refresh-wrapper
      position absolute
      top 10px
      left 0
      width 100%
      z-index 1000
    .back-wrapper
      position fixed
      left 0
      top 10px
      width 36px
      height 22px
      z-index 100000
    .content
      .address-wrapper
        padding 15px 10px
        text-align left
        background #171718
        margin-top 10px
        .name
          color #ffffff
          height 22px
          line-height 22px
          font-size 16px
        .address
          display flex
          height 22px
          line-height 22px
          padding 18px 0
          color #ACB1BB
          font-size 14px
          .left
            flex 0 0 27px
            background url("icon_Shape.svg")no-repeat 0 center /16px 20px
          .right
            flex 1
            background url("arrow_right.svg")no-repeat 100% center/6px 12px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            padding-right 10px

        .tel
          display flex
          .left
            flex 0 0 27px
          .right
            flex 1
            color #ACB1BB
            height 21px
            line-height 21px
            font-size 14px

      .activity-wrapper
        text-align left
        margin-top 10px
        padding 15px 10px 0 10px
        background #171718
        .name
          height 22px
          line-height 22px
          color #ffffff
          font-size 16px
        .activity-items-wrapper
          margin-top 14px
          height 88px
          overflow hidden
          transition height 0.3s
          &.loadMore
            height 132px
            transition height 0.3s
          .activity-item
            height 44px
            display flex
            .left
              .tag
                margin-top 15px
                height 11px
                line-height 13px
                border 1px solid #F7C20F
                font-size 10px
                color #F7C20F
                border-radius 7px
                padding 0 2px
            .right
              flex 1
              padding-left 11px
              color #ffffff
              font-size 14px
              line-height 44px
              background url("arrow_right.svg")no-repeat 100% center/6px 12px
        .load-more
          text-align center
          height 32px
          line-height 32px
          color #51555C
          font-size 12px
          .arrow
            display inline-block
            height 12px
            width 12px
            background url("arrow_bottom.svg")no-repeat center /12px 5px
            transform: rotate(0deg)
            transition transform 0.3s
            &.loadMore
              transform: rotate(180deg)
              transition transform 0.3s


      .special-service-wrapper
        padding 15px 10px
        background #171718
        margin-top 10px
        text-align left
        .name
          height 22px
          line-height 22px
          color #ffffff
          font-size 16px
        .tag-items-wrapper
          margin-top 20px
          .tag-item
            padding-top 12px
            display flex
            height 21px
            overflow hidden
            .left
              flex 0 0 75px
              .tag
                margin-top 3px
                display inline-block
                height 13px
                line-height 13px
                font-size 10px
                color #8B929E
                padding 0 2px
                border-radius 2px
                border 1px solid #8B929E
                max-width 63px
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
            .right
              flex 1
              line-height 23px
              color #ACB1BB
              font-size 14px
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
      .info-wrapper
        padding 15px 10px
        background #171718
        margin-top 10px
        margin-bottom 10px
        text-align left
        .name
          height 22px
          color #ffffff
          line-height 22px
          font-size 16px
        .content
          margin-top 18px
          font-size 14px
          color #ACB1BB
          line-height 21px
</style>
